<template>
	<view>
		<block v-for="(item,index) in coupons" :key="item.id">
			<view class="coupon" :style="{'--color':color,
			'--discountColor':discountColor,'--expireColor':expireColor,'--btnColor':btnColor}">
				<!-- 优惠券上半部分 -->
				<view class="top-part" :class="item.state">
					<!-- 左半部分 -->
					<view class="left">
						<view class="limit">{{item.coupon_title}}</view>
						<view class="expire">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<!-- 右半部分 -->
					<view class="right " :class="{expired:item.state}">
						<text class="yen">&yen;</text><text class="discount">{{item.price}}</text>
					</view>
				</view>
				<!-- 优惠券下半部分 -->
				<view class="bottom-part" :class="{gray:item.state}">
					<view class="limit">{{item.end_time | gettime}}</view>
					<view v-show="!item.user_name" class="btn" @click="getCoupon(item,item.state)">领取</view>
					<view v-show="item.user_name" class="btn" @click="handleToUse(item)">使用</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		name: "lgf-coupon",
		props: {
			color: {
				type: String,
				default: '#f3f3f4'
			},
			discountColor: {
				type: String,
				default: '#f52443'
			},
			expireColor: {
				type: String,
				default: '#f5dfde'
			},
			btnColor: {
				type: String,
				default: '#e6005c'
			},
			coupons: {
				type: Array,
				default: () => [{
					couponName: '无门槛优惠券',
					expire: '2020-12-12 12:12:00至2020-12-12 12:12:00',
					discount: 15,
					limit: '仅限于xxx使用',
					btn: '领取',
					state: null
				}, {
					couponName: '无门槛优惠券',
					expire: '今日到期',
					discount: 15,
					limit: '仅限于xxx使用',
					btn: '领取',
					state: "expired"
				}]
			}
		},
		data() {
			return {

			}
		},
		filters: {
			gettime(time) {
				let m1 = moment(time),
					m2 = moment();
				if (m2.diff(m1, 'minute') >= 0) {
					return '已失效'
				} else {
					return '未失效'
				}
			}
		},
		
		methods: {
			handleToUse(item){
				this.$store.commit('m_user/updateCouponsPrice',item)
				uni.$showMsg('使用成功')
				console.log(item)
			},
			getCoupon(item, state) {
				if (state) {
					uni.showToast({
						title: "已失效",
						icon: "none"
					})
				} else {
					this.$emit('getCoupon', item)
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.coupon {
		--expire: #ced2d6; //失效状态的颜色
		margin: 20rpx;

		.top-part {
			display: flex;
			justify-content: space-between;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.left {
				.limit {
					font-size: 35rpx;
					padding: 30rpx 5rpx 5rpx 30rpx;
				}

				.expire {
					display: inline-block;
					text-align: center;
					font-size: 20rpx;
					margin: 0 5rpx 15rpx 30rpx;
					padding: 0 15rpx;
					border-radius: 15rpx;
					background-color: var(--expireColor);
				}
			}

			.right {
				color: var(--discountColor);
				display: flex;
				padding: 30rpx 30rpx 15rpx 5rpx;
				align-items: center;
				justify-content: center;
				font-weight: bold;

				.discount {
					font-size: 48rpx;
				}
			}

			&::after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				border-bottom: 1px dashed #ededef;
			}
		}

		.bottom-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25rpx;
			position: relative;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.limit {
				color: #807f8a;
				padding: 15rpx 30rpx;
			}

			.btn {
				color:#fff;
				height: 40rpx;
				margin-right: 15rpx;
				padding: 0 25rpx;
				border-radius: 35rpx;
				line-height: 40rpx;
				background-color: crimson;
			}

			&::before {
				display: block;
				content: '';
				width: 16rpx;
				height: 34rpx;
				background-color: var(--color);
				border-top-right-radius: 17rpx;
				border-bottom-right-radius: 17rpx;
				position: absolute;
				top: -20rpx;
			}

			&::after {
				display: block;
				content: '';
				width: 16rpx;
				height: 34rpx;
				background-color: var(--color);
				border-top-left-radius: 17rpx;
				border-bottom-left-radius: 17rpx;
				position: absolute;
				top: -20rpx;
				right: 0;
			}
		}

		.expired .right {
			color: var(--expire);
		}

		.expired .left .expire,
		.gray .btn {
			background-color: var(--expire);
		}

		

		.expired::before {
			font-size: 40rpx;
			text-align: center;
			line-height: 150rpx;
			display: block;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			border-style: double;
			border-color:  #ff557f;
			color: #ff557f;
			font-weight: bold;
			border-width: 3px;
			background-color: transparent;
			position: absolute;
			transform: rotate(-40deg);
			right: 40%;
			top: 20%;
			z-index: 99;
		}

		.expired:before {
			content: '已失效';
		}
	}
</style>
